<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>涅槃系统</title>
    <!-- MDUI CSS -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
            integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
            crossorigin="anonymous"
    />
</head>
<body>
        <!-- 头部 -->
        <div class="mdui-appbar">
            <div class="mdui-toolbar mdui-color-theme">
<!--                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>-->
                <a href="javascript:;" class="mdui-typo-headline">涅槃</a>
<!--                <a href="javascript:;" class="mdui-typo-title">Title</a>-->
                <div class="mdui-toolbar-spacer"></div>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-xs-3">
                <!--  菜单  -->
                <ul class="mdui-list" mdui-collapse="{accordion: true}">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
                        <div class="mdui-list-item-content">主页</div>
                    </li>
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
                        <div class="mdui-list-item-content">仪表板</div>
                    </li>
                    <li class="mdui-collapse-item mdui-collapse-item-open">
                        <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
                            <div class="mdui-list-item-content">人脉</div>
                            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                        </div>
                        <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
                            <li class="mdui-list-item mdui-ripple">Overview</li>
                            <li class="mdui-list-item mdui-ripple">Language</li>
                            <li class="mdui-list-item mdui-ripple">Location</li>
                            <li class="mdui-list-item mdui-ripple">New vs Returning</li>
                        </ul>
                    </li>
                    <li class="mdui-collapse-item">
                        <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
                            <div class="mdui-list-item-content">集成</div>
                            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                        </div>
                        <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
                            <li class="mdui-list-item mdui-ripple">Overview</li>
                            <li class="mdui-list-item mdui-ripple">All Traffic</li>
                            <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
                            <li class="mdui-list-item mdui-ripple">Search Overview</li>
                        </ul>
                    </li>
                    <li class="mdui-collapse-item">
                        <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
                            <div class="mdui-list-item-content">行为</div>
                            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                        </div>
                        <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
                            <li class="mdui-list-item mdui-ripple">Overview</li>
                            <li class="mdui-list-item mdui-ripple">All Pages</li>
                            <li class="mdui-list-item mdui-ripple">Landing Pages</li>
                            <li class="mdui-list-item mdui-ripple">Exit Pages</li>
                        </ul>
                    </li>
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
                        <div class="mdui-list-item-content">购物车</div>
                    </li>
                </ul>
            </div>
            <div class="mdui-col-xs-9">
                    1111
            </div>
        </div>

    <!-- MDUI JavaScript -->
    <script
            src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
            integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
            crossorigin="anonymous"
    ></script>
</body>
</html>
